<%@ page language="java" contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="zh-cn" class="no-js">
<!--<![endif]-->
<head>
    <jsp:include page="/common/common.jsp"/>
    <script src="${path}/audit/layer/layer.js"></script>					
	<script src="${path}/audit/layer/extend/layer.ext.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/assets/plugins/select2/select2.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/assets/plugins/select2/select2-metronic.css"/>
    <link href="${path}/audit/layer/skin/layer.css" rel="stylesheet">
	<link href="${path}/audit/layer/skin/layer.ext.css" rel="stylesheet">
<script>
var aaa1 = [];
var aaa2 = [];
var aaa3 = [];
var aaa4 = [];
var aaa5 = [];
var aaa6 = [];
var bbb1 = [];
var bbb2 = [];
var bbb3 = [];
var bbb4 = [];
var bbb5 = [];
var bbb6 = [];
var ccc = 0;
</script>
</head>
<body class="page-header-fixed">
<jsp:include page="/common/header.jsp"/>
<script src="${path}/assets/plugins/ueditor/third-party/highcharts/highcharts.js"></script>
<script src="${path}/assets/plugins/ueditor/third-party/highcharts/modules/exporting.js"></script>
<div class="clearfix">
</div>
<div class="page-container">
    <div class="page-sidebar-wrapper"><jsp:include page="/common/menu.jsp"/></div>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet box purple">
                    
                        <div class="portlet-title">
                            <div class="caption">
                                <i class="fa fa-file-text-o"></i> QQ统计 
                            </div>
                            <div class="tools">
                                <div class="actions">
                            <a href='javascript:window.open("${path}/qqRecord/downExcel?"+$("#formQuery").serialize())' class="btn blue">导出Excel</a>
                        		</div>
                        	</div>
                        </div>
                        <div class="portlet-body">
                            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
                        </div>
                        <div class="portlet-body">
                            <form id="formQuery" class="form-horizontal" action="${path}/qqRecord/list">
                                <div class="form-body">
                                    
                                    <div class="form-group">
                                        <label class="col-md-1 control-label">QQ号码</label>
                                        <div class="col-md-2">
                                            <input type="text" id="qq_account" name="qq_account" class="form-control"/>
                                        </div> 
                                         <label class="col-md-1 control-label">IP</label>
                                        <div class="col-md-2">
                                            <input type="text" id="user_ip" name="user_ip" class="form-control"/>
                                        </div>  
                                        <label class="col-md-1 control-label">状态</label>
                                        <div class="col-md-2">
                                            <select id="state" name="state" class="form-control">
                                                <option value="">所有</option>
                                                <option value="1">上线</option>
                                                <option value="2">离线</option>
                                            </select>
                                        </div>
                              </div>   
                                <div class="form-group">
                                	<label class="col-md-1 control-label">发布时间</label>
                                        <div class="col-md-4">
                                            <div class="input-group input-large date-picker input-daterange"
                                                 data-date-format="yyyy-mm-dd">
                                                <input type="text" class="form-control" id="fromDate" name="fromDate" value="${entity.createTime.split(",")[0]}"
                                                       readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                                                <span class="input-group-addon">to</span>
                                                <input type="text" class="form-control" id="toDate" name="toDate" value="${entity.createTime.split(",")[1]}"
                                                       readonly="readonly" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})"/>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <button type="button" class="btn green" onclick="getqqRecordList()">查询</button>      <!-- e 查询直接调用getNewsList() 在本末的script中-->
                                        </div>
                                </div>
                                </div>
                            </form>
                            <table class="table table-striped table-bordered table-hover" id="qqRecordList"></table>   
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/common/footer.jsp"/>
<script type="text/javascript" src="${path}/assets/plugins/calendar/WdatePicker.js"></script>
<script type="text/javascript" src="${path}/assets/plugins/district/linkagesel-min.js"></script>
<script type="text/javascript" src="${path}/audit/qqRecord/js/qqRecord.js"></script>    
<script type="text/javascript" src="${path}/audit/qqRecord/js/json2.js"></script>       
<script type="text/javascript" >
    var msg = '${msg}';
    $(function () {
        if(msg){
        	App.bubble(200, msg);      
        }
        /*
        var qq_b=$("#fromDate").val();
        var qq_e=$("#toDate").val();
        if(qq_b=="" && qq_e!=""){
        	//alert("发布时间同为空或者都不为空");
        	$("#fromDate").val("");
        }
        if(qq_b!="" && qq_e==""){
        	//alert("发布时间同为空或者都不为空");
        	$("#fromDate").val("");
        }*/
        getqqRecordList(); 
        $('#pid').change(function() {
            changeSecondType(this.value);
        });
    });
    function changeSecondType(pid) {
        $.ajax({
            url: _path + '/conf/queryConfTByPid?pid='+pid,
            type: 'GET',
            success: function(resp) {
                $("#columnId").html('');
                new LinkageSel({
                    dataReader: {id: 'id', name: 'value0'},
                    data: resp.dataList,
                    selStyle: 'margin-left: 3px;',
                    select:  '#columnId'
                });
            }
        });
    }
</script>
</body>
</html>
<script type="text/javascript">
function getlist(){
	var qq_b=$("#fromDate").val();
    var qq_e=$("#toDate").val();
    var qq=$("#qq_account").val();
    var state=$("#state").val();
    var ip=$("#user_ip").val();
    if(qq_b=="" && qq_e!=""){
    	$("#toDate").val("");
    	layer.alert("发布时间同为空或者都不为空,目前显示为当天数据！", {skin: 'layui-layer-molv',offset: '30%'});
    }
    if(qq_b!="" && qq_e==""){
    	$("#fromDate").val("");
    	layer.alert("发布时间同为空或者都不为空,目前显示为当天数据！", {skin: 'layui-layer-molv',offset: '30%'});
    }
   // alert(url_b+"abc");
    	$.ajax({										//name为 字符串类型，columnid为Long类型
    	    url: _path + "/qqRecord/analysis?qq_b="+qq_b+"&qq_e="+qq_e+"&qq="+qq+"&state="+state+"&ip="+ip,
    	    type: "POST",
    	    dataType: "json",
    	    async: false,
    	    success: function(jsonMap) {
    	    	var list1 = jsonMap.dataList1;
    	    	var list2 = jsonMap.dataList2;
    	    	var list3 = jsonMap.dataList3;
    	    	var list4 = jsonMap.dataList4;
    	    	var list5 = jsonMap.dataList5;
    	    	var list6 = jsonMap.dataList6;
    	    	
    	        if(list1.length>0){
    	        	for(var i=0;i<list1.length;i++){
    	        		aaa1[i]=list1[i].aa1;
    	        		bbb1[i]=list1[i].time1;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa1.length = 0;
    	        	bbb1.length = 0;
    	        	
    	        }
    	        
    	    	if(list2.length>0){
    	        	for(var i=0;i<list2.length;i++){
    	        		aaa2[i]=list2[i].aa1;
    	        		bbb2[i]=list2[i].time1;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa2.length = 0;
    	        	bbb2.length = 0;
    	        	
    	        }
    	    	
    	    	if(list3.length>0){
    	        	for(var i=0;i<list3.length;i++){
    	        		aaa3[i]=list3[i].aa1;
    	        		bbb3[i]=list3[i].time1;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa3.length = 0;
    	        	bbb3.length = 0;
    	        	
    	        }
    	    	
    	    	if(list4.length>0){
    	        	for(var i=0;i<list4.length;i++){
    	        		aaa4[i]=list4[i].aa1;
    	        		bbb4[i]=list4[i].time1;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa4.length = 0;
    	        	bbb4.length = 0;
    	        	
    	        }
    	    	
    	    	if(list5.length>0){
    	        	for(var i=0;i<list5.length;i++){
    	        		aaa5[i]=list5[i].aa1;
    	        		bbb5[i]=list5[i].time1;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa5.length = 0;
    	        	bbb5.length = 0;
    	        	
    	        }
    	    	
    	    	if(list6.length>0){
    	        	for(var i=0;i<list6.length;i++){
    	        		aaa6[i]=list6[i].aa1;
    	        		bbb6[i]=list6[i].time1;
    	        	}
    	        } 
    	        else
    	        {
    	        	aaa6.length = 0;
    	        	bbb6.length = 0;
    	        	
    	        }
    	    }
    	});
    	//alert(aaa1[0]);
	draw_qq ();
}
function draw_qq () {
    $(function () {
        $('#container').highcharts({
            chart: {
            },
            title: {
                text: 'QQ统计分析'
            },
            xAxis: {
                categories: [bbb1[0], bbb2[0], bbb3[0], bbb4[0], bbb5[0],bbb6[0]]
            },
            yAxis : {
				title : {
					text : '统计(记录数)'
				}
			},
            tooltip: {
                formatter: function () {
                    var s;
                    if (this.point.name) { // the pie chart
                        s = '' +
                                this.point.name + ': ' + this.y + ' fruits';
                    } else {
                        s = '' +
                                this.x + ': ' + this.y;
                    }
                    return s;
                }
            },
            /*
            labels: {
                items: [
                    {
                        html: 'Total fruit consumption',
                        style: {
                            left: '40px',
                            top: '8px',
                            color: 'black'
                        }
                    }
                ]
            },*/
            series: [
                {
                    type: 'column',
                    name: '各个时间段统计',
                    data: [aaa1[0], aaa2[0], aaa3[0], aaa4[0], aaa5[0],aaa6[0]]
                },
                /*{
                    type: 'column',
                    name: 'John',
                    data: [aaa1, aaa2, aaa3, aaa4, aaa5,aaa6]
                },
                {
                    type: 'column',
                    name: 'Joe',
                    data: [aaa1, aaa2, aaa3, aaa4, aaa5,aaa6]
                },*/
                {
                    type: 'spline',
                    name: '平均值',
                    data: [aaa1[0],aaa2[0], aaa3[0], aaa4[0], aaa5[0],aaa6[0]],
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[3],
                        fillColor: 'white'
                    }
                },
            /*    {
                    type: 'pie',
                    name: 'Total consumption',
                    data: [
                        {
                            name: 'Jane',
                            y: 13,
                            color: Highcharts.getOptions().colors[0] // Jane's color
                        },
                        {
                            name: 'John',
                            y: 23,
                            color: Highcharts.getOptions().colors[1] // John's color
                        },
                        {
                            name: 'Joe',
                            y: 19,
                            color: Highcharts.getOptions().colors[2] // Joe's color
                        }
                    ],
                    center: [100, 80],
                    size: 100,
                    showInLegend: false,
                    dataLabels: {
                        enabled: false
                    }
                } */
            ]
        });
    });
}
</script>
